<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>整车分析</title>
<%
	String sid = request.getParameter("secondMenuId");
	request.getSession().setAttribute("secondMenuId", sid);
%>
<%@include file="/jsp/include/common.jsp"%>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/assets/ui/jquery-easyui-1.4.1/extend/tree.loadFilter.js"></script>
</head>
<body class="easyui-layout">
	<%@include file="/jsp/include/commonLayout.jsp"%>
	<div data-options="region:'center'">
		<div class="easyui-layout" data-options="fit:true">
			<div data-options="region:'center'">
				<div id="tabs" class="easyui-tabs"
					style="width: 100%; height: 540px;">
					<div title="基本信息对比" style="padding: 20px;">
						<div>
							<div class="wrap">
								<div class="auto-sina-results">
									<div class="results-item">
										<table class="item-table" cellpadding="0" cellspacing="0">
											<tbody>
												<tr class="">
													<th class="table-options">
														<div class="table-options-info">
															<p>本系统数据仅提供参考，购车时请以实车为准。</p>
															<p style="margin-top: 5px;">● 标准配置</p>
															<p>○ 可选配置</p>
															<p>__ 无</p>
														</div>
													</th>
													</th>
													<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
													<th class="table-cars"><img src="<%=request.getContextPath()%>/assets/img/a6l.jpg" height="87" width="136">
														<div>
															<p>
																<a title="奥迪A6L" target="_blank" href="">奥迪A6L</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
																<a class="easyui-linkbutton" iconCls="icon-reload">换车</a>
															</p>
															<p>
																<a href="" title="2014款 2.0L TFSI手动 基本型" target="_blank">2014款
																	2.0L TFSI手动 基本型</a>
															</p>
															<p>
																售价：<span class="red">57</span>万
															</p>
														</div></th>
													</th>
													<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
													</th>
													<th class="table-cars"><img src="<%=request.getContextPath()%>/assets/img/a6l.jpg" height="87" width="136">
														<div>
															<p>
																<a title="奥迪A6L" target="_blank" href="">奥迪A6L</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
																<a class="easyui-linkbutton" iconCls="icon-reload">换车</a>
															</p>
															<p class="item-info-mod">
																<a href="" title="2014款 2.5L 30FSI手自一体技术型"
																	target="_blank">2014款 2.5L 30FSI手自一体技术型</a>
															</p>
															<p>
																售价：<span class="red">80</span>万
															</p>
														</div>
													</th>
													<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
													</th>
													<th class="table-cars"><img src="<%=request.getContextPath()%>/assets/img/a4.jpg" height="87" width="136">
														<div>
															<p class="item-info-brand">
																<a title="奥迪A3" target="_blank" href="">奥迪A3</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
																<a class="easyui-linkbutton" iconCls="icon-reload">换车</a>
															</p>
															<p class="item-info-mod">
																<a href="" title="2014款 Sportback 35TFSI进取型"
																	target="_blank">2014款 Sportback 35TFSI进取型</a>
															</p>
															<p>
																售价：<span class="red">20</span>万
															</p>
														</div>
													</th>
													</th>
													<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
													</th>
													<th>
														<div>
															品牌 <select id="cc" class="easyui-combobox" name="dept" style="width: 200px;">
																<option></option>
																<option>奥迪</option>
																<option>宝马</option>
															</select>
														</div>
														<div id="select-3-2" class="select">
															车型 <select id="cc" class="easyui-combobox" name="dept" style="width: 200px;">
																<option></option>
																<option>奥迪A6L</option>
																<option>奥迪A3</option>
																<option>奥迪A8L</option>
																<option>宝马X6</option>
																<option>宝马X3</option>
															</select>
														</div>

														<div id="select-3-3" class="select">
															配置 <select id="cc" class="easyui-combobox" name="dept" style="width: 200px;">
																<option></option>
																<option>旗舰</option>
																<option>舒适</option>
																<option>运动</option>
																<option>标准</option>
																<option>基本</option>
															</select>
														</div>
														<div id="option-3-3" class="opt-cars" style="display: none;">
														</div>
														<div class="btn-addcar" onclick="addCars(3)">
														</div>
													</th>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
						<div>
							<table id="dataGrid" style=""></table>
						</div>
						<div>
							<table id="dataGrider" style=""></table>
						</div>
					</div>
					<div title="配置信息对比" style="padding: 20px;">
						<div>
							<div class="wrap">
								<div class="auto-sina-results">
									<div class="results-item">
										<table class="item-table" cellpadding="0" cellspacing="0">
											<tbody>
												<tr class="">
													<th class="table-options">
														<div class="table-options-info">
															<p>本系统数据仅提供参考，购车时请以实车为准。</p>
															<p style="margin-top: 5px;">● 标准配置</p>
															<p>○ 可选配置</p>
															<p>__ 无</p>
														</div>
													</th>
													</th>
													<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
													<th class="table-cars"><img
														src="<%=request.getContextPath()%>/assets/img/a6l.jpg"
														height="87" width="136">
														<div>
															<p>
																<a title="奥迪A6L" target="_blank" href="">奥迪A6L</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
																<a class="easyui-linkbutton" iconCls="icon-reload">换车</a>
															</p>
															<p>
																<a href="" title="2014款 2.0L TFSI手动 基本型" target="_blank">2014款
																	2.0L TFSI手动 基本型</a>
															</p>
															<p>
																售价：<span class="red">57</span>万
															</p>
														</div></th>
													</th>
													<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
													</th>
													<th class="table-cars"><img
														src="<%=request.getContextPath()%>/assets/img/a6l.jpg"
														height="87" width="136">
														<div>
															<p>
																<a title="奥迪A6L" target="_blank" href="">奥迪A6L</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
																<a class="easyui-linkbutton" iconCls="icon-reload">换车</a>
															</p>
															<p class="item-info-mod">
																<a href="" title="2014款 2.5L 30FSI手自一体技术型"
																	target="_blank">2014款 2.5L 30FSI手自一体技术型</a>
															</p>
															<p>
																售价：<span class="red">80</span>万
															</p>
														</div></th>
													<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
													</th>
													<th class="table-cars"><img
														src="<%=request.getContextPath()%>/assets/img/a4.jpg"
														height="87" width="136">
														<div>
															<p class="item-info-brand">
																<a title="奥迪A3" target="_blank" href="">奥迪A3</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
																<a class="easyui-linkbutton" iconCls="icon-reload">换车</a>
															</p>
															<p class="item-info-mod">
																<a href="" title="2014款 Sportback 35TFSI进取型"
																	target="_blank">2014款 Sportback 35TFSI进取型</a>
															</p>
															<p>
																售价：<span class="red">20</span>万
															</p>
														</div></th>
													</th>
													<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
													</th>
													<th>
														<div>
															品牌 <select id="cc" class="easyui-combobox" name="dept"
																style="width: 200px;">
																<option></option>
																<option>奥迪</option>
																<option>宝马</option>
															</select>
														</div>
														<div id="select-3-2" class="select">
															车型 <select id="cc" class="easyui-combobox" name="dept"
																style="width: 200px;">
																<option></option>
																<option>奥迪A6L</option>
																<option>奥迪A3</option>
																<option>奥迪A8L</option>
																<option>宝马X6</option>
																<option>宝马X3</option>
															</select>
														</div>

														<div id="select-3-3" class="select">
															配置 <select id="cc" class="easyui-combobox" name="dept"
																style="width: 200px;">
																<option></option>
																<option>旗舰</option>
																<option>舒适</option>
																<option>运动</option>
																<option>标准</option>
																<option>基本</option>
															</select>
														</div>
														<div id="option-3-3" class="opt-cars"
															style="display: none;"></div>
														</div>
														<div class="btn-addcar" onclick="addCars(3)"></div>
														</div>
													</th>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
						<div>
							<table id="dataGrid1" style=""></table>
						</div>
						<div>
							<table id="dataGrider1" style=""></table>
						</div>
					</div>
					<div title="图片对比" style="overflow: auto; padding: 20px;"></div>

				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	$(document).ready(
			function() {
						// 添加验证(远程验证)
				$("#userid1").textbox(
								{
									required : true, //定义为必填字段
									validType : 'remote["'
											+ getRootPath()
											+ '/UserinfoController/findUserById.do","userid"]', //定义字段验证类型
									invalidMessage : '用户名已存在', //当文本框的内容被验证为无效时出现的提示
									delay : 1000
								//延迟到最后验证输入值
								});
				$("#email1").textbox({
					required : true,
					validType : "email"
				});
				var dataGrider = $('#dataGrider').datagrid(
						{
							rownumbers : true, //如果为true，则显示一个行号列
							fitColumns : true, //真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动
							collapsible : true, //定义是否显示可折叠按钮
							title : '基本参数', //在面板头部显示的标题文本
							method : 'post', //该方法类型请求远程数据
							url : getRootPath()
									+ '/template/json/partofcar.json', //一个URL从远程站点请求数据
							singleSelect : false,//只能选一行
							striped : true, //数据条纹显示
							columns : [ [ {
								field : 'userid',
								title : '车型',
								width : 100,
								align : 'right'
							}, {
								field : 'email',
								title : '奥迪A6L旗舰版',
								width : 200,
								center : true,
								align : 'center'
							}, {
								field : 'phone',
								title : '奥迪A6L手自一体技术型',
								width : 200,
								align : 'center'
							}, {
								field : 'odesc',
								title : '奥迪A3',
								width : 200,
								align : 'center'
							}, {
								field : 'oid',
								title : '',
								width : 200,
								align : 'center'
							} ] ],
							sortName : 'userid', //定义哪些列可以进行排序
							remoteFilter : true, //设置为true时，启用远程过滤
							filterDelay : 1000, //延迟过滤 'text' 过滤器组件中最后一次键盘输入事件
							filterStringify : function(data) { //字符串化过滤器规则的函数
								return JSON.stringify(data);
							}
						});
				var dataGrider1 = $('#dataGrider1')
						.datagrid(
								{
									rownumbers : true, //如果为true，则显示一个行号列
									fitColumns : true, //真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动
									collapsible : true, //定义是否显示可折叠按钮
									title : '底盘', //在面板头部显示的标题文本
									method : 'post', //该方法类型请求远程数据
									url : getRootPath()
											+ '/template/json/partcomparative2.json', //一个URL从远程站点请求数据
									singleSelect : false,//只能选一行
									striped : true, //数据条纹显示
									columns : [ [ {
										field : 'userid',
										title : '车型',
										width : 100,
										align : 'right'
									}, {
										field : 'email',
										title : '奥迪A6L旗舰版',
										width : 200,
										align : 'center'
									}, {
										field : 'phone',
										title : '奥迪A6L手自一体技术型',
										width : 200,
										align : 'center'
									}, {
										field : 'odesc',
										title : '奥迪A3',
										width : 200,
										align : 'center'
									}, {
										field : 'oid',
										title : '',
										width : 200,
										align : 'center'
									} ] ],
									sortName : 'userid', //定义哪些列可以进行排序
									remoteFilter : true, //设置为true时，启用远程过滤
									filterDelay : 1000, //延迟过滤 'text' 过滤器组件中最后一次键盘输入事件
									filterStringify : function(data) { //字符串化过滤器规则的函数
										return JSON.stringify(data);
									}
								});
				var dataGrid1 = $('#dataGrid1')
						.datagrid(
								{
									rownumbers : true, //如果为true，则显示一个行号列
									fitColumns : true, //真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动
									collapsible : true, //定义是否显示可折叠按钮
									title : '发动机', //在面板头部显示的标题文本
									method : 'post', //该方法类型请求远程数据
									url : getRootPath()
											+ '/template/json/partcomparative1.json', //一个URL从远程站点请求数据
									singleSelect : false,//只能选一行
									striped : true, //数据条纹显示
									columns : [ [ {
										field : 'userid',
										title : '车型',
										width : 100,
										align : 'right'
									}, {
										field : 'email',
										title : '奥迪A6L旗舰版',
										width : 200,
										align : 'center'
									}, {
										field : 'phone',
										title : '奥迪A6L手自一体技术型',
										width : 200,
										align : 'center'
									}, {
										field : 'odesc',
										title : '奥迪A3',
										width : 200,
										align : 'center'
									}, {
										field : 'oid',
										title : '',
										width : 200,
										align : 'center'
									} ] ],
									sortName : 'userid', //定义哪些列可以进行排序
									remoteFilter : true, //设置为true时，启用远程过滤
									filterDelay : 1000, //延迟过滤 'text' 过滤器组件中最后一次键盘输入事件
									filterStringify : function(data) { //字符串化过滤器规则的函数
										return JSON.stringify(data);
									}
								});

				// 初始化表格
				var dataGrid = $('#dataGrid')
						.datagrid(
								{
									rownumbers : true, //如果为true，则显示一个行号列
									fitColumns : true, //真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动
									collapsible : true, //定义是否显示可折叠按钮
									title : '车身参数', //在面板头部显示的标题文本
									method : 'post', //该方法类型请求远程数据
									url : getRootPath()
											+ '/template/json/partcomparative.json', //一个URL从远程站点请求数据
									singleSelect : false,//只能选一行
									striped : true, //数据条纹显示
									columns : [ [ {
										field : 'userid',
										title : '车型',
										width : 100,
										align : 'right' //如果为true，则允许列使用排序
									}, {
										field : 'email',
										title : '奥迪A6L旗舰版',
										width : 200,
										align : 'center'
									}, {
										field : 'phone',
										title : '奥迪A6L手自一体技术型',
										width : 200,
										align : 'center'
									}, {
										field : 'odesc',
										title : '奥迪A3',
										width : 200,
										align : 'center'
									}, {
										field : 'oid',
										title : '',
										width : 200,
										align : 'center'
									} ] ],
									sortName : 'userid', //定义哪些列可以进行排序
									remoteFilter : true, //设置为true时，启用远程过滤
									filterDelay : 1000, //延迟过滤 'text' 过滤器组件中最后一次键盘输入事件
									filterStringify : function(data) { //字符串化过滤器规则的函数
										return JSON.stringify(data);
									}
								});

			});
	function back() {
		window.location.href = getRootPath() + '/template/dataManage/part/partList.jsp';
	}
</script>
</html>
